<template>
  <!-- 收货仓详情 -->
  <a-modal :width="500" v-model:visible="showWarehouseInfo" title="收货仓详情" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
    <div class="warehouse-info">
      <p class="warehouse-name">{{ warehouseInfo.warehouseName }}({{ warehouseInfo.warehouseCode }})</p>
      <p>联系人：{{ warehouseInfo.receiver }}({{ warehouseInfo.receiverMobile }})</p>
      <p>{{ warehouseInfo.country }}，{{ warehouseInfo.province }}，{{ warehouseInfo.city }}，{{ warehouseInfo.address }}</p>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { getWarehouseInfoByCode } from '@/api/warehouse'

  onMounted(() => {
    getWarehouseInfo()
  })
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
    },
    warehouseCode: {
      type: String,
    },
  })

  const showWarehouseInfo = ref(props.isShow)
  const warehouseInfo = ref<any>({})
  console.log(props.warehouseCode)
  // 获取仓库信息
  async function getWarehouseInfo() {
    const res: any = await getWarehouseInfoByCode({ warehouseCode: props.warehouseCode })
    warehouseInfo.value = res?.data || []
  }
  // 关闭
  function closedDialog() {
    showWarehouseInfo.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .warehouse-info {
    min-height: 150px;
  }
  .warehouse-name {
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>
